<template>
    <view class="u-p-30">
			<u-form :model="form" ref="uForm">
				<block>
					<view class="u-p-30 u-type-white-bg u-radius-10">
						<u-form-item label="头像" prop="avatar">
							<view slot="right">
								<button class="u-reset-button" open-type="chooseAvatar" @chooseavatar="chooseavatar">
									<u-avatar :src="form.avatar"></u-avatar>
								</button>
							</view>
						</u-form-item>
						<u-form-item label="姓名" prop="nickname" >
							<u-input type="nickname" v-model="form.nickname" placeholder="请输入姓名" input-align="right" :clearable="false" @input="nameChange" disabled/>
						</u-form-item>
						<u-form-item label="电话" prop="phone" :border-bottom="false">
							<u-input type="phone" v-model="form.phone" placeholder="请输入电话" input-align="right" :clearable="false" disabled />
						</u-form-item>
					</view>
				</block>
				
			</u-form>
		<view class="submit-btn safe-area-inset-bottom">
			<view class="u-p-30">
				<u-button type="success" shape="circle" :custom-style="{background:'#009476'}" @click="submitBtn">确认</u-button>
			</view>
		</view>
    </view>
</template>

<script>
	import { uploadUrl } from '@/common/settings'
    export default {
        data() {
            return {
				uploadUrl,
				form: {
					avatar: '',
					nickname: '',
					phone: ''
				},
				filepath: '' //图片保存所需路径
            };
        },
		onShow() {
			this.form.avatar = this.userInfo.avatar || '';
			this.form.nickname = this.userInfo.nickname || '';
			this.form.phone = this.userInfo.phone || '';
			if(this.form.avatar) this.filepath = this.$u.func.cutImgUrl(this.form.avatar);
		},
        methods: {
            // 更新会员信息
			submitBtn(){
				this.$u.api.updateMember({
					id: this.userInfo.id,
				    nickname: this.form.nickname,
				    avatar: this.filepath,
					phone: this.userInfo.phone
				}).then(res => {
					this.$u.toast(res.msg, 'success');
					this.$u.api.getUserInfo().then(result => {
						this.$u.vuex('userInfo',result.data)
						this.$u.vuex('isLogin',true)
						setTimeout(() => uni.navigateBack(),1500)
					})
				}).catch(err => {
				    this.$u.toast(err.msg);
				})
			},
            // 获取用户头像
            chooseavatar(e) {
				var that = this;
				that.form.avatar = e.detail.avatarUrl;
				uni.uploadFile({
				    url: uploadUrl,
				    filePath: e.detail.avatarUrl,
				    name: 'file',
				    success: (uploadFileRes) => {
				        let res = JSON.parse(uploadFileRes.data)
				        that.filepath = res.data.filepath;
				    },
					fail: (err) => {
				    	console.log(err)
				    }
				});
            },
            // 获取用户昵称
            nameChange(value) {
                this.form.nickname = value;
            }
        }
    }
</script>

<style lang="scss">
	.submit-btn{
		background: #fff;
	}
</style>
